<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - maze</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<script type="module">

			import * as THREE from '../build/three.module.js';
			import Stats from './jsm/libs/stats.module.js';
			import { OrbitControls, MapControls } from './jsm/controls/OrbitControls.js';
			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

			let stats;

			let camera, scene, renderer, clock,controls;
			
			let object;

			init();
			animate();
			function init() {

				const container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
				
				controls = new OrbitControls( camera, renderer.domElement );
				camera.position.set( 0, 20, 50 );
				controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
				controls.dampingFactor = 0.05;
				
				controls.screenSpacePanning = false;
				
				controls.minDistance = 20;
				controls.maxDistance = 980;
				
				controls.maxPolarAngle = Math.PI / 2;

				scene = new THREE.Scene();
				
				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
				scene.add( ambientLight );
				
				function loadModel() {
					object.scale.z=10;//缩放级别
					object.scale.x=10;//缩放级别
					object.scale.y=10;//缩放级别
					scene.add( object );
				}
				
				const manager = new THREE.LoadingManager( loadModel );
				
				function onProgress( xhr ) {
					if ( xhr.lengthComputable ) {
						const percentComplete = xhr.loaded / xhr.total * 100;
						console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );
					}
				}
				
				function onError() {}
				
				const objloader = new OBJLoader( manager );
				objloader.load( './models/maze.obj', function ( obj ) {

					object = obj;
					console.log(object);
					

				}, onProgress, onError );
				// model
				// new GLTFLoader().load( 'models/maze.glb', function ( gltf ) {
				// 	gltf.scene.traverse( function ( child ) {
				// 		if ( child.isMesh ) {
				// 			child.material.normalMapType = THREE.ObjectSpaceNormalMap;
				// 			child.geometry.deleteAttribute( 'normal' );
				// 			child.material.side = THREE.DoubleSide;
				// 			child.scale.multiplyScalar( 3 );
				// 			new THREE.Box3().setFromObject( child ).getCenter( child.position ).multiplyScalar( - 1 );
				// 			scene.add( child );
				// 		}
				// 	} );
				// } );
				
				
				// ground
				const txtloader = new THREE.TextureLoader();
				const groundTexture = txtloader.load( 'jsm/textures/grasslight-big.jpg' );
				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
				groundTexture.repeat.set( 25, 25 );
				groundTexture.anisotropy = 16;
				groundTexture.encoding = THREE.sRGBEncoding;
				
				const groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
				
				let mesh = new THREE.Mesh( new THREE.PlaneGeometry( 20000, 20000 ), groundMaterial );
				mesh.position.y = - 250;
				mesh.rotation.x = - Math.PI / 2;
				mesh.receiveShadow = true;
				scene.add( mesh );

				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				//renderer.autoClearColor = false;
				container.appendChild( renderer.domElement );

				stats = new Stats();
				container.appendChild( stats.dom );

				window.addEventListener( 'resize', onWindowResize );
			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );
				controls.update();
				renderer.render( scene, camera );
				
				stats.update();
			}

		</script>

	</body>
</html>
